<template>
  <view class="pay">
    <!-- 1 收货地址 -->
    <view class="address-wrap">
      <view v-if="!address" class="address-btn-wrap u-text-center u-p-30">
        <u-button
          plain
          shape="circle"
          type="error"
          size="medium"
          @click="handleChooseAddress"
          >获取收货地址</u-button
        >
      </view>

      <view class="address-info u-p-30" v-else>
        <view class="address-detail"> {{ detailAddress }} </view>
        <view class="address-user u-m-t-20 u-flex">
          <text class="u-m-r-20">{{ address.userName }}</text>
          <text>{{ address.telNumber }}</text>
        </view>
      </view>
    </view>
    <!-- 2.购物车中的商品 -->
    <u-line color="#eee"></u-line>
    <u-line color="#eee"></u-line>
    <u-line color="#eee"></u-line>
    <u-line color="#eee"></u-line>

    <view class="checked-list">
      <view class="checked-list-title u-p-20">已选商品</view>
      <view class="checked-list-content">
        <view
          class="cart-item"
          v-for="item in checkedCartList"
          :key="item.goods_id"
        >
          <!-- 图片 -->
          <view class="cart-img">
            <u-image
              width="190rpx"
              height="190rpx"
              :src="item.goods_small_logo"
            ></u-image>
          </view>
          <!-- 商品信息 -->
          <view class="cart-info">
            <view class="goods-name u-line-2">{{ item.goods_name }}</view>
            <view class="goods-tool">
              <view class="goods-price">￥{{ item.goods_price }}</view>
              <view class="goods-num-change">
                <view class="num-value">X{{ item.num }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 2 统计栏结构 -->
    <view class="statistics">
      <!-- 合计 -->
      <view class="total">
        合计：
        <text class="rmb">￥</text>
        <text class="total-price">{{ totalPrice }}</text>
      </view>
      <!-- 购买按钮 -->
      <u-button
        type="error"
        :custom-style="{
          fontSize: '26rpx',
          width: '220rpx',
          height: '52rpx',
          borderRadius: '26rpx',
        }"
        @click="handlePay"
        >去支付({{ totalCount }})</u-button
      >
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations, mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      //   address: null,
    };
  },
  computed: {
    ...mapState(["token"]),
    ...mapGetters(["checkedCartList", "totalPrice", "totalCount", "address"]),

    // 获取详细地址
    detailAddress() {
      if (!this.address) return "";
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
  },
  methods: {
    ...mapMutations(["setAddress"]),
    ...mapActions(["fetchToken"]),
    // 获取收货地址
    async handleChooseAddress() {
      // 调用小程序的获取微信存的地址 chooseAddress()
      const [err, address] = await uni.chooseAddress();
      this.setAddress(address);
    },

    // handlePay 点击支付按钮
    async handlePay() {
      // 先判定是否已经选择地址，没有就提示用户，有就进行支付流程
      if (!this.address) {
        uni.showToast({
          title: "请选择地址哦",
          icon: "none",
        });
      }

      if (!this.token) {
        await this.fetchToken();
      }

      // 构造创建订单要的参数
      const orderParams = {
        // 是	string	订单总价格
        order_price: this.totalPrice,
        // 是	string	收货地址 + - 姓名 + - 号码
        consignee_addr:
          this.detailAddress +
          "-" +
          this.address.userName +
          "-" +
          this.address.telNumber,
        // 是	Array	订单数组
        goods: this.checkedCartList.map((goods) => ({
          // number	商品id
          goods_id: goods.goods_id,
          // number	购买的数量
          goods_number: goods.num,
          // number	单价
          goods_price: goods.goods_price,
        })),
      };

      // 发送请求 完成订单的创建了
      const res4 = await this.$u.post("/my/orders/create", orderParams);
      // 获取订单编号
      const { order_number } = res4.message;

      // 获取支付参数
      const res5 = await this.$u.post("/my/orders/req_unifiedorder", {
        order_number,
      });
      const { pay } = res5.message;

      // 调用微信支付
      const res6 = await uni.requestPayment(pay);
      //   console.log(res6);
      // requestPayment:ok   用户成功支付

      // 查看订单支付状态
      const res7 = await this.$u.post("/my/orders/chkOrder", { order_number });
      console.log(res7);
    },
  },
};
</script>

<style lang="scss">
.pay {
  padding-bottom: 83rpx;
}
.cart-item {
  padding: 20rpx;
  display: flex;

  .chk {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart-img {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart-info {
    flex: 3;
    margin-left: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .goods-tool {
      display: flex;
      justify-content: space-between;
      .goods-price {
        color: $globalColor;
      }

      .goods-num-change {
        display: flex;
        color: #666;
        .num-btn {
          width: 36rpx;
          height: 36rpx;
          border: 1rpx solid #666;
          border-radius: 50%;

          display: flex;
          align-items: center;
          justify-content: center;
        }

        .num-value {
          margin: 0 20rpx;
        }
      }
    }
  }
}
.statistics {
  height: 83rpx;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  border-top: 1rpx solid #ccc;
  display: flex;
  padding: 0 10rpx;
  align-items: center;
  background-color: #fff;

  .all-chk {
    padding: 0 10rpx;
  }

  .total {
    flex: 1;
    .rmb {
      color: $globalColor;
      font-size: 20rpx;
    }

    .total-price {
      color: $globalColor;
    }
  }
}
</style>